<template>

	<view :class="['container',{'dark':theme=='dark'}]">
		<view class="userinfo-card">
			<view class="card-box">
				<view class="balance-card-wrap">
					<view class="balance-card">
						<view class="xia">
							<view class="num">
								<view class="avatar-wrap">
									<image class="avatar" :src="head" mode=""></image>
								</view>
								<text style="font-size: 4vw;margin-left: 2vw;">
									<text style="font-size: 4vw;position: absolute;top: 2vw;right: 10vw;left: 26vw;">
								
										<image src="../../static/ico/vip.png" class="flex_image"></image>
									</text>

									<text style="font-size: 6vw;position: absolute;top: 12vw;right: 10vw;left: 26vw;">
										<text>{{myOtc.haveAppeal=='Y' && (myOtc.deposit == 1|| myOtc.deposit == 5) ? myOtc.number:"0.0000"}}</text>
										<text style="font-size: 4vw;margin-left: 2vw;"> USDT</text>
									</text>
								</text>
							</view>
							<view class="withdraw-btn" v-show="myOtc.deposit == 0 || myOtc.deposit == 2||myOtc.deposit == 4||myOtc.deposit == 7"
								@click="funsItemClick(1)">{{$t('bico.W188')}}</view>
							<view class="withdraw-btn" v-show="myOtc.deposit == 1|| myOtc.deposit == 5">{{$t('bico.W189')}}</view>
							<view class="withdraw-btn" v-show="myOtc.deposit == 6">{{$t('bico.W190')}}</view>
							<view class="withdraw-btn" v-show="myOtc.deposit == 3">{{$t('bico.W191')}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<!-- 币商列表 -->
			<view :class="['tool-card','funs',{'darksss':theme=='dark'}]">

				<u-line color="#5559691f"></u-line>
				
				<view :class="['tool-item flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(2)">
					<!-- <image src="../../static/member/tuiguang.png" mode="widthFix" class="view-image-left"></image> -->
					<view class="item-right">
						<view class="view-text">{{$t('bico.W198')}}</view>
						<image src="../../static/member/right_icon.png" class="view-image-right"></image>
					</view>
				</view>
			
			</view>
		</view>
		<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in list" :key="index">
					<u-parse :html="item.content">
					</u-parse>
				</u-collapse-item>
			</u-collapse>
	</view>
</template>
<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {
		commonProblem,
		bzjMgrPage
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		components: {
			uniPopup
		},
		data() {
			return {
				isFinger: "0",
					token: '',
					info: '',
					myOtc: {
						USDT: '0.0000',
						deposit: "0",
						haveAppeal: "N",
						nickName: "Name User",
						number: 100,
						realStatus: "0",
						usedPrice: 0.000,
					},
					fingerBool: 0,
					faceBool: 0,
					head: '../../static/rvm.png',
	
					list:[],
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('home.hehuoren'),
			})
			this.$utils.setTheme(this.theme);
			this.bzjMgrPage()
		},
		onShow() {
			this.getHtml()
			this.bzjMgrPage()
		},
		methods: {
			bzjMgrPage() {
				this.$utils.initDataToken({
					url: bzjMgrPage,
					type: 'post'
				}, (res, msg) => {
					console.log(res)
					this.myOtc = res
					uni.setStorageSync('myOtc', res);
				})
			},
			funsItemClick(index) {
				
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/bzj/jbzj?deposit='+this.myOtc.deposit //缴纳保障金
					})
				};
				if (index == 2) {
					if(this.myOtc.number<=0 ||this.myOtc.haveAppeal=='N'){
						this.$utils.showLayer(this.$t('bico.W200'),);
						return
					}
					if(!(this.myOtc.deposit=='1'||this.myOtc.deposit=='5')){
						this.$utils.showLayer(this.$t('bico.W201'),);
						return
					}
					uni.navigateTo({
						url: '/pages/bzj/return' //退保障金
					})
				};
			},
			getHtml(){
					this.$utils.initData({
						url: commonProblem,
						data: {
							type: 'HEHUOREN',
							size:100,
							language:uni.getStorageSync('lang')
						},
						type: 'post'
					}, (res, msg) => {
						//uni.stopPullDownRefresh();
						this.list=res.records
						this.list.forEach(res=>{
								res.showFlag=false
						})
					})
				}
			
			
		},
	}
</script>
<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.avatar {

		background: #ffffff0a;
		border-radius: 50%;
		width: 16vw;
		height: 16vw;
		overflow: hidden;
		border: 1vw solid #ffffff14;
		position: relative;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		top: -0.5vw;
		right: 10vw;
		left: 0vw;
	}

	.container {
		width: 100%;
		height: 100%;

		.flex_image {
			width: 6vw;
			height: 6vw;
			border-radius: 50%;
			position: relative;
			top: 0.4vw;
		}

		.userinfo-card {
			.card-box {
				width: 100%;
				height: 120px;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						top: 1.2vw;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;

							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 3.6vw;

								font-weight: 600;

							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;

								font-weight: 500;

								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 200upx;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;
					.balance-card {
						width: 100%;
						height: 90px;
						background-image: url(../../static/business/businessbg.png);
						background-position: 0% 0%;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-radius: 4px;
						padding: 30upx;

						.tit {

							font-weight: bold;
							color: #FFF;
							font-size: 4.2vw;
							position: absolute;
							top: 3vw;
							right: 10vw;
							left: 6vw;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;

								font-weight: bold;
								color: #FFF;
							}

							.withdraw-btn {
								/*width: 75px;*/
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: #243eccad;
								font-size: 12px;
								padding: 0px 10px;
								font-weight: 500;
								color: #FFF;
								border-radius: 2vw;
								position: relative;
								top: 0vw;
							}
						}
					}
				}
			}

		}


		.main {
			padding: 20upx;
			
			
			.tit {
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			    font-size: 3.6vw;
			    line-height: 16px;
			    font-weight: bold;
			}
			
			.tit uni-image {
			    width: 5px;
			    height: 10px;
			}

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 4px;
				padding: 30upx;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 3.6vw;
					line-height: 32upx;

					font-weight: bold;


					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 3.6vw;

							font-weight: 600;
							position: relative;
							top: -1vw;

						}

						.funsItemImage {
							position: relative;
							top: -1vw;
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

						.text {
							font-size: 12px;

							font-weight: 400;

						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #5559691f;
					}
				}
			}

			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 4px;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 0px;
							font-size: 3.4vw;

							font-weight: bold;

						}

						.view-image-right {
							width: 10upx;
							height: 21upx;
						}

						.funsItemImage {
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

					}
				}
			}
		}
	}
</style>
